<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0
        }

        #clock {
            width: 600px;
            height: 600px;
            margin: 30px auto;
            background: url("./images/biaopan.jpg");
            position: relative;
        }

        #hour {
            width: 80px;
            height: 300px;
            position: absolute;
            top: 154px;
            left: 260px;
            background: url("./images/shizhen.png")
        }

        #minute {
            width: 50px;
            height: 280px;
            position: absolute;
            top: 174px;
            left: 275px;
            background: url("./images/fenzhen.png")
        }

        #second {
            width: 60px;
            height: 240px;
            position: absolute;
            top: 174px;
            left: 275px;
            background: url("./images/mioazhen.png")
        }
    </style>
</head>
<body>
<div id="clock">
    <div id="hour"></div>
    <div id="minute"></div>
    <div id="second"></div>
</div>

<script type="text/javascript">
    //获取元素节点
    let hour = document.getElementById("hour");
    let minute = document.getElementById("minute");
    let second = document.getElementById("second");

    function getTime() {
        //获取当前时间
        let date = new Date();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        //计算时分秒针的运动  秒针走动一秒,时针分针都需要动  eg:时针走一个小时,转动30度
        let h_ = h * 30 + m / 2;
        let m_ = m * 6 + s / 10;
        let s_ = s * 6;
        //将上一步算出来的角度进行拼接
        hour.style.transform = 'rotate(' + h_ + 'deg)';
        minute.style.transform = 'rotate(' + m_ + 'deg)';
        second.style.transform = 'rotate(' + s_ + 'deg)';
        //定时 1s 执行一次
        setTimeout(getTime, 1000);
    }

    getTime();
</script>
</body>
</html>
